<template>
  <div class="history">
    <div class="history-header">
      <van-icon name="arrow-left" @click="()=>{this.$router.push('/home/my')}" />
      <h3>历史记录</h3>
      <span></span>
    </div>
    <!-- <div class="header">
      <p @click="()=>{this.$router.push('/home/my')}">&lt;</p>
      <p>历史记录</p>
      <p></p>
    </div>-->
    <div class="main">
      <div class="room-main" v-if="hisList">
        <div v-for="(item,ind) in hisList" :key="ind" @click="detail(item)">
          <dl>
            <dt>
              <img :src="'http://47.102.145.189:8009'+item.houseImg" alt />
            </dt>
            <dd>
              <p class="titles">{{item.title}}</p>
              <p>{{item.desc}}</p>
              <p>{{item.tages}}</p>
              <span>{{item.price}}元</span>
            </dd>
          </dl>
        </div>
      </div>
      <div class="room-main" v-else>没有浏览记录！！！去看房子吧~~~~</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hisList: []
    };
  },
  created() {
    this.hisList = JSON.parse(sessionStorage.getItem("history"));
  }
};
</script>

<style>
.history {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.history-header {
  width: 100%;
  height: 8%;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}
.history-header h3 {
  font-size: 18px;
  font-weight: normal;
}
.history-header i {
  display: flex;
  align-items: center;
  font-size: 20px;
}
.main {
  flex: 1;
  overflow: scroll;
}
.room-main {
  width: 100%;
  height: auto;
  background: #ffffff;
}
.room-main dl {
  display: flex;
  padding: 20px 20px;
  /* margin: 20px 20px; */
}
.room-main dl dt img {
  width: 106px;
  height: 80px;
}
.room-main dl dd {
  padding-left: 20px;
  font-size: 14px;
}
.room-main dl dd p {
  padding-top: 5px;
}
</style>